<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx练习</title>
</head>
<body>
  <!-- 展示前端框架 -->
  
  <!-- 容器 -->
  <div id="app"></div>


  <!-- 引入文件 -->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>


  <script type="text/babel">
  let jsList = ['Angular','React','Vue']
  // 创建虚拟DOM
  const VDom = (
    <div>
      <h2>前端JS框架列表</h2>
      <ul>
        {
          jsList.map((item) => {
            return <li key={item}>{item}</li>
          })
        }
      </ul>  
    </div>
  )
  // 渲染
  ReactDOM.render(VDom,document.getElementById('app'))

  // 遍历数据返回虚拟DOM时，需给每一项添加唯一的key值，（Diffing算法要求，使用遍历的index只能消除报错，无法发挥实际作用）

  // react会遍历数组，但接收对象会报错
  /*
  
一定注意区分：【js语句（代码）】与【js表达式】
  1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
    下面这些都是表达式：
        (1)、a
        (2)、a+b
        (3)、fn(1)
        (4)、arr.map()
        (5)、function test(){}
    有返回值（或可以直接赋值给变量的都是表达式）
    函数没有自定义return时，默认return undefined
    
  2.语句（代码）
    下面的都是语句（代码）
      (1).if(){}
      (2).for(){}
      (3).switch(){}
  */
  </script>
</body>
</html>